<style lang="less" scoped>
@import "./rule.less";
</style>
<template>
  <div>
      <Row>
					<Col span="24">
							<Card>
									<p slot="title" style="height: 32px">
											<Button type="primary" @click="alertAdd" icon="plus-round">新增</Button>
									</p>
									<div>
											<Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
									</div>
									<div class="margin-top-15" style="text-align: center">
											<Page :total="tableShow.listCount" :current="tableShow.currentPage"
														:page-size="tableShow.pageSize" @on-change="changePage"
														@on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
									</div>
							</Card>
					</Col>
			</Row>
			<Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
					<p slot="header" style="color:#2d8cf0;">
							<Icon type="information-circled"></Icon>
							<span>{{formItem.id ? '编辑' : '新增'}}规则</span>
					</p>
					<Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
							<FormItem label="规则名称" prop="name">
									<Input v-model="formItem.name" placeholder="请输入规则名称"></Input>
							</FormItem>
							<FormItem label="显示名称" prop="title">
									<Input v-model="formItem.title" placeholder="请输入显示"></Input>
							</FormItem>
							<FormItem label="规则详情" prop="name">
									<Input v-model="formItem.rule_set" placeholder="请输入规则详情 Method-Controller-action"></Input>
							</FormItem>
					</Form>
					<div slot="footer">
							<Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
							<Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
					</div>
			</Modal>
  </div>
</template>
<script>
import axios from "axios";
const editButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          vm.formItem.ruleId = currentRow.id;
					vm.formItem.name = currentRow.name;
					vm.formItem.rule_set = currentRow.rule_set;
					vm.formItem.title = currentRow.title;
          vm.modalSetting.show = true;
          vm.modalSetting.index = index;
        }
      }
    },
    "编辑"
  );
};
const deleteButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,
        title: "您确定要删除这条数据吗? ",
        transfer: true
      },
      on: {
        "on-ok": () => {
          axios.delete("rule/" + currentRow.id).then(function(response) {
            currentRow.loading = false;
            if (response.data.code === 200) {
              vm.tableData.splice(index, 1);
              vm.$Message.success(response.data.msg);
            } else {
              vm.$Message.error(response.data.msg);
            }
          });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },
          props: {
            type: "error",
            placement: "top",
            loading: currentRow.isDeleting
          }
        },
        "删除"
      )
    ]
  );
};
export default {
  data() {
    return {
      tableShow: {
        listCount: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "规则名称",
          key: "name",
          align: "center"
        },
        {
          title: "显示名称",
          key: "title",
          align: "center"
        },
        {
          title: "规则",
          key: "rule_set",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          key: "handle",
          width: 175,
          handle: ["edit", "delete"]
        }
			],
			modalSetting: {
				show: false,
				loading: false,
				index: 0
			},
			formItem:{
				ruleId:0,
				name:'',
				title:'',
				rule_set:'',
			},
			ruleValidate: {
				name: [
					{ required: true, message: '规则名称不能为空', trigger: 'blur' }
				],
				title: [
					{ required: true, message: '显示名称不能为空', trigger: 'blur' }
				],
				rule_set: [
					{required: true, message: '详细规则不能为空', trigger: 'blur'}
				]
			}
    };
  },
  created() {
    this.getRules();
    this.init();
  },
  methods: {
    init() {
      this.columnsList.forEach(item => {
        if (item.key === "handle") {
          item.render = (h, params) => {
            return h("div", [
              editButton(this, h, this.tableData[params.index], params.index),
              deleteButton(this, h, this.tableData[params.index], params.index)
            ]);
          };
        }
      });
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getRules();
    },
    alertAdd() {
			this.modalSetting.show = true
		},
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getRules();
    },
    getRules() {
      axios
        .get("rule", {
          params: {
            page: this.tableShow.currentPage,
            size: this.tableShow.pageSize
          }
        })
        .then(response => {
          let res = response.data;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.tableShow.listCount = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
		},
		cancel () {
			this.modalSetting.show = false;
		},
		doCancel (data) {
			if (!data) {
				this.formItem.ruleId = 0;
				this.$refs['myForm'].resetFields();
				this.modalSetting.loading = false;
				this.modalSetting.index = 0;
			}
		},
		submit(){
			this.$refs['myForm'].validate((validate)=>{
				if(validate){
					this.modalSetting.loading = true;
					if(this.formItem.ruleId === 0){
						axios.post('rule',this.formItem).then((response)=>{
							if(response.data.code===200){
								this.$Message.success(response.data.msg);
							}else{
								if(response.data.code===403){
									this.$store.commit("logout", this);
									this.$router.push({
										name: "login"
									});
								}else{
									this.$Message.error(response.data.msg)
								}
							}
						})
					}else{
						axios.put('rule/'+this.formItem.ruleId,this.formItem).then((response)=>{
							if(response.data.code===200){
								this.$Message.success(response.data.msg);
							}else{
								if(response.data.code===403){
									this.$store.commit("logout", this);
									this.$router.push({
										name: "login"
									});
								}else{
									this.$Message.error(response.data.msg)
								}
							}
						})
					}
					this.getRules()
					this.cancel()
				}
			})
		},

  }
};
</script>


